<template>
  <button :draggable='draggable' :class="[btnCss, dragableCss]" :style="btnStyle"
          :id="myId" :data-type="uiconfig.type"
          :data-pageid="pageid" :data-isContainer="false"
          @dblclick.stop="inlineEditItemId=uiconfig.meta.id"  @keyup.enter="inlineEditItemId=''"
          :contenteditable="inlineEditItemId==uiconfig.meta.id"
          :type="buttonType">
    <IconWrapper :uiconfig="uiconfig">{{uiconfig.meta.title}}</IconWrapper>
  </button>
</template>

<script lang="ts">
import Button from '@/components/ui/js/Button'
import { computed } from 'vue'
import { useStore } from 'vuex'
import IconWrapper from '@/components/ui/vant/IconWrapper.vue'

export default {
  name: 'Vant_Button',
  components: { IconWrapper },
  props: {
    uiVersion: String,
    uiconfig: Object,
    isLock: Boolean,
    isReadonly: Boolean,
    pageid: String,
    dragableCss: Object
  },
  setup (props: any, context: any) {
    const store = useStore()
    const button = new Button(props, context, store)

    const myButtonSetup = button.setup()
    // 如果上层是按钮，那么继承他的outline，size属性
    const buttonMeta = computed(() => myButtonSetup.parentIsNavbar.value ? myButtonSetup.parentUi.value.meta : props.uiconfig.meta)

    const selfHasForeground = computed(() => props.uiconfig.meta?.css?.foregroundTheme && props.uiconfig.meta?.css?.foregroundTheme !== 'default')
    const selfHasBackground = computed(() => props.uiconfig.meta?.css?.backgroundTheme && props.uiconfig.meta?.css?.backgroundTheme !== 'default')
    const buttonSizing = computed(() => {
      return store.getters.translate('buttonSizing', buttonMeta.value?.css?.buttonSizing)
    })
    const btnStyle = computed(() => {
      const myStyle = button.getUIStyle()
      // 如果按钮有背景和前景则用按钮的，否则用上层的
      const color = myStyle?.color || buttonMeta.value?.style?.color
      const backgroundColor = myStyle?.['background-color'] || buttonMeta.value?.style?.['background-color']
      if (!selfHasForeground.value && color) {
        myStyle.color = color
      }
      if (!selfHasBackground.value && backgroundColor) {
        myStyle['background-color'] = backgroundColor
        myStyle['border-color'] = backgroundColor
      }
      if (buttonMeta.value.custom?.isOutline) {
        delete myStyle['background-color']
      }
      return button.appendImportant(myStyle)
    })

    const btnCss = computed(() => {
      const css = button.getUICss()
      // 如果按钮有背景和前景则用按钮的，否则用上层的
      let myBackgruondTheme = css.backgroundTheme ? props.uiconfig.meta?.css?.backgroundTheme : ''
      let myForegroundTheme = css.foregroundTheme ? props.uiconfig.meta?.css?.foregroundTheme : ''
      delete css.backgroundTheme
      delete css.foregroundTheme
      myBackgruondTheme = myBackgruondTheme || buttonMeta.value?.css?.backgroundTheme
      myForegroundTheme = myForegroundTheme || buttonMeta.value?.css?.foregroundTheme

      const raw:any = Object.values(css)
      raw.push('van-button')

      // 如果上层是按钮，那么继承他的outline，size属性
      if (myBackgruondTheme && myBackgruondTheme !== 'default') {
        raw.push('van-button--' + myBackgruondTheme)
      } else {
        raw.push('van-button--default')
      }
      if (buttonMeta.value.custom?.isOutline) {
        raw.push('van-button--plain')
      }
      if (myForegroundTheme && myForegroundTheme !== 'default') {
        raw.push(store.getters.translate('foregroundTheme', myForegroundTheme))
      }
      const sizeCss = buttonSizing.value
      raw.push(sizeCss || 'van-button--normal')

      return raw.join(' ')
    })
    const buttonType = computed(() => {
      return props.uiconfig?.meta?.custom?.type || 'button'
    })
    return {
      ...myButtonSetup,
      btnCss,
      btnStyle,
      buttonType
    }
  }
}
</script>
